1. Design Features
It is said that content is king but a king can't run a kingdom without its ministers. Design is equally important to make your reader fall in love with your blog. Interesting content + awesome design will give your blog a 10 on 10. And this blogger template has everything you want. Following are some design features of this template
1.1. Responsive Design
Before CSS media queries came into existence, people used different layouts file for different screen sizes but it wasn't possible to make different template files for all screen sizes as devices with different screen sizes are launched everyday. But Media Queries makes it easy for one single template file to fit on every screen sizes.
Responsive Design is a technique to apply different stylesheet for different screen sizes and this is what we have done with this blogger template. It applies different style for different screen sizes, you can see an example by re-sizing the browser window, you will notice how it adapts itself with the screen size available. Using this template your blog can be viewed from any devices. It means you will have a much wider audience.
Even this document page is responsive, to see its responsiveness re-size your browser window.
1.2. Clean and Simple Design
The design of this template is very simple but attractive too. The complete template uses one theme of color which makes the blog easy to view. Everyone likes light color, it doesn't cause irritation to eye. The template isn't using lots of fancy elements around the main content that can distract the user.
The layout has a header, right sidebar and a footer. The priority is given to the main content and it is presented in a good simple way. Your readers will love reading articles with such presentations, the fonts are not too small nor too huge to make it difficult for the user to read the texts on the page. You can just focus on writing.
1.3. Fast Page load
The template is minimal and that makes the template load fast as the CPU won't have much things to render. We used simple CSS to create the design. Avoided designs that can slow down the page like box-shadow with 100px blur or something like that which takes more time to render.
Google and other search engines gives more importance to pages that loads fast. It means a better search rankings and better rankings means more traffic.
1.4. Easy Customizations
The template is responsive but it doesn't mean you can't access the customization options in Blogger. Yup, most of the options in template designer still can be used to edit the template. And for other changes you can try editing the CSS styles in the template file.
2. Gadget Features
In this template we have added useful gadgets that makes the blog easy to use like page navigation, social share etc.
2.1. Page Navigation Menu with Category dropdown
The template includes a navigation menu on the top of the page, it's an ideal location to place a nav menu. Th navigation menu contains the links to pages on your blog and also a category list which contains the most common category on your blog, try to limit the number of labels or categories you use, as it helps the reader to browse your content easily, without any confusion.
The navigation menu doesn't updates pages automatically , so you have to make some changes in the HTML to add your pages into it. If you are just adding basic static pages like About, Contact etc. you just have to put your page URL in the navigation HTML. For more information about setting up the page navigation menu see 3.2. Changing the Navbar Pages
2.2. Search bar on top and bottom
The template has two search bar, one on top and other at bottom. With search bars searching content becomes easy for a visitor and they spend more time on the blog exploring content of their interest . Having search bar both at top and bottom makes a mobile user life easy, as scrolling again top to access the search bar will just be so difficult and that's the reason this template has search bars on top and bottom.
2.3. Social Share below post titles
For people who loves social network this is a great add-on for them. Share buttons of Facebook, Twitter and Pinterest has been added for readers to share the post with their friend, like it, tweet it or pin it!
The share button are added using AddThis and you can add or remove share buttons easily. For information about setting up the share button see 3.5. Adding/Removing Social Share Button
2.4. Feedburner Subscribe Box Below Post
What do you want your readers to do after reading a post? Subscribe your blog! Yup, encouraging a visitor to subscribe your blog by writing a line in your post like "Subscribe to our blog, please" can be a little awkward but placing a subscribe box just below the article will encourage the visitor to subscribe to your feed without requesting them to do so.
Subscribe box below posts is the best place to add a subscribe widget, after reading your post the visitor can subscribe to your blog if they like the post. It's easy to use and users love easily accessible things. We are sure it will increase the number of subscribers for your blog but do remember to update some values in the Feedburner gadget HTML to redirect your visitors to your feed, see this 3.3. Changing the Feed URL for Subscribe Box
2.5. Social Profile Icons
If you are a social network hero then this is for you. Now tell your blog readers where they can find you on social networks. The gadget is placed above the footer. But you have to make some changes to link it to your social profiles, see 3.4. Changing the Social Profile links
3. Setting up the Template
The template is ready to be uploaded for your blog, the guide below will tell you how to upload a template to a blogger blog and also some other settings you have to make in the template to make your template work the way you want.
3.1. Uploading the template
The first step is to upload the template and it is super easy to upload a blogger template. But before uploading this new template remember to take a backup of your previous template.
To upload the template log into your Blogger Dashboard -> Go to the Template tab -> Click on Restore/Backup, a box will appear.
Now click on Choose File file and browse to the XML (Reiulanus Responsive Template.xml) template file in the downloaded files. Once the template file is uploaded, refresh your blog for the changes. If the new template didn't appeared then clear you caches and reload your using CTRL+F5 (windows) or CMD+F5 (mac).
Note: The template is responsive and is compatible with mobile devices so you can turn off default mobile template in the Template tab.
3.2. Changing the Navbar Pages
The first change you have to make in the template is the links in navigation menu. But before making any changes to the HTML, backup your template.
To edit the links in navigation menu, open your template HTML editor by going to Blogger Dashboard -> Template -> Edit HTML -> Check mark Expand Widgets Template. Now use browsers search function (default: CTRL+F) to search for <!-- Top Menu --> The HTML code for navigation menu is below this HTML comment and you to make any change in the navigation menu just edit the code below that comment.
Editing Page Links: To make the links in navigation menu to go to your pages and URL you just have to make some changes in the HTML code. This is an example code of a page in navigation menu
<li><a href='url-to-about-page'>About</a></li>
In the <a> element you have to replace the value of href with the link to your about page, just replace url-to-about-page with the link to your About page and also you can change the text for the link from About to About Me, About Us or anything you like. It might then look like this
<li><a href='http://myfashionblog.blogspot.com/p/about.html'>About Us</a></li>
Do this for all the links except the Home page link as it fetches the homepage URL dynamically. Also if you want to add more pages, just copy the above line and paste it below the previous list item and just change the values.
Editing Categories Links: Changing the links for category menu inside the navigation menu is same as changing links for pages. The HTML for category list is this
<li><a id='new-cat-menu'>Categories</a><!-- Category links --><div id='hideen-menudrpd-cont' style='display:none;'><ul class='hidden-menu-dropd' id='hidden-menu1'><li><a href='link-to-label'>Angry Birds</a></li><li><a href='link-to-label'>Animals</a></li><li><a href='link-to-label'>Cartoons</a></li><li><a href='link-to-label'>Celebrities</a></li><li><a href='link-to-label'>Scenery</a></li><li><a href='link-to-label'>Sketch</a></li></ul></div></li>
The above HTML is for the categories menu, the list items below <!-- Category Links --> are the links that appears when you click on Category and editing the links of labels is same as editing the links for pages, just replace the link-to-label with the URL to a label and then replace the text for example Angry Birds with the name of your label. This is what it should look like :
<li><a href='http://www.myfashionblog.blogspot.com/search/label/Glasses'>Glasses</a></li>
Learn from the example and change the values for every label in the list item. And to add new labels copy and paste the above line below the previous and just edit the values.
3.3. Changing the Feed URL for Subscribe Box
The Feedburner gadget code needs to be edited so it could redirect the user to your feed instead of mine. Before we start changing codes, you have to create a feed and then activate email subscriptions for the feed. To learn how to create a feed for blogger check How to Setup Feedburner on Blogger and then activate email subscription for the feed (check the link provided).
After activating email subscriptions you need your Feedburner Feed name for example if your feed URL is http://feeds.feedburner.com/FasionBlog then the Feed name is FashionBlog
<form action='http://feedburner.google.com/fb/a/mailverify' id='email-subscribe-postbtm' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=MyFeed', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><h4>Subscribe by Email for Updates</h4><input id='pstb01-email' name='email' placeholder='enter your email address ' type='text'/><input name='uri' type='hidden' value='MyFeed'/><input name='loc' type='hidden' value='en_US'/><input id='pstb01-submit' type='submit' value='Subscribe'/><p id='dltkdmdbvy'>Delivered by <a href='http://feedburner.google.com' target='_blank'>FeedBurner</a></p></form>
The code above is for Feedburner gadget in the template, just search for <!-- Subscribe Box Code Below --> in the template and you will find the code below it. Here Feed name for my Feed is MyFeed (highlighted in green) just replace it with your Feed name and save the template. Now it should redirect to your feed.
3.4. Changing the Social Profile Links
Find the code below in the template by opening your template using the Edit HTML in your blog's template tab. Use your browser search function to find the following code
<div class='getsocial'><span><a href='http://twitter.com/TWITTER-ID' id='iconTwitter' target='_blank' title='Twitter'>Twitter</a></span><span><a href='http://www.facebook.com/FACEBOOK-ID' id='iconFacebook' target='_blank' title='Facebook'>Facebook</a></span><span><a href='FEED-LINK' id='iconRSS' target='_blank' title='RSS Feed'>RSS</a></span><span><a href='YOUTUBE-ID' id='iconYouTube' target='_blank' title='YouTube Channel'>YouTube</a></span><span><a href='GOOGLE-ID?rel=author' id='iconGooglePlus' target='_blank' title='Google Plus'>Google</a></span></div>
In the above code just replace the text inside href attribute with the link to your profile on the site. For example, to update link of your twitter profile in the HTML , the result would look like this :
<span><a href='http://twitter.com/xxxdepy' id='iconTwitter' target='_blank' title='Twitter'>Twitter</a></span>
Do it for every social profile links and it's done.
3.5. Adding/Removing Social Share Button
The social share buttons below post title are added using AddThis, so it's super easy to add or remove social share buttons. The code for the AddThis share button is this :
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/><a class='addthis_button_tweet'/><a class='addthis_button_pinterest_pinit'/>
Each <a> element in this code is a share button. You can use AddThis to add extra social share button by adding more <a> element from AddThis.com.